<template>
	<view>
		<view class="gudingbox">
			<view v-if="info.replace" @click="fabufenlei">
				<view class="fabutupian">
					<image src="../../static/image/system/fabu.png" mode=""></image>
				</view>
				<view class="baisetext">发布 </view>
			</view>
			<view v-if="info.news" @click="xiaoxiym">
				<view class="xiaoxi">
					<image src="../../static/image/system/xiaoxi.png" mode=""></image>
				</view>
				<view class="baisetext">消息 </view>
			</view>
			<view v-if="info.jishi" @click="tzjs">
				<view class="jishitupian">
					<image src="../../static/image/system/jishi.png" mode=""></image>
				</view>
				<view class="baisetext">集市 </view>
			</view>
		</view>
		<!-- 发布弹出层 -->
		<u-popup :show="fbshow" @close="fbclose" @open="fbopen" mode="center" :round="10">
			<view class="tanchuc">
				<view class="titletext" style="text-align: center;">发布</view>
				<view class="yichuyinc">
					<view class="flexbetween huanhang">
						<view :class="fenleiid==item.id?'huanhang bgc':'huanhang fbbtn'" v-for="item in allfnelei" :key="item.id" @click="xzfenlei(item)">
							<view>{{item.name}}</view>
							<!-- <view class="fufei" v-show="spendpriceShow(item.spendprice)"></view> -->
							<view class="fufei" v-show="item.flag">付费</view>
						</view>
					</view>
				</view>
				<view class="shangbianju">
					<view class="dafabbtn" @click="tzdabu">发布</view>
					<view class="fufeibtn" @click="fffb">付费发布</view>
					<!-- <view class="fufeibtns" @click="tzqtadiq">付费发送到其他校区</view> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		name: "replacebtn",
		props: ['info'],
		data() {
			return {
				//发布分类
				allfnelei: [],
				fbshow: false,
				fenleiid: "",
				fenleitext:"",
				items:{},
			};
		},
		methods: {
			spendpriceShow(value){
				console.log(value,9999)
				if(value=='0.00'){
					return false
				}else{
					return true
				}
			},
			xzfenlei(item) {
				this.items = item;
				console.log(this.items)
				this.fenleiid = item.id
				this.fenleitext = item.name
			},
			fabufenlei() {
				// 如果用户未登录点击去登陆
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				this.fbshow = true
				httpRequest.request('topic/lists', 'POST', {
					school_id:'',
				}, false, false, true).then(res => {
					res.data.forEach(item=>{
						if(item.spendprice=="0.00"){
							Object.assign(item,{
								flag:false
							})
						}else{
							Object.assign(item,{
								flag:true
							})
						}
					})
					console.log(res,"发布列表数据")
					this.allfnelei = res.data
				})
			},
			fbopen() {
				// console.log('open');
			},
			fbclose() {
				this.fbshow = false
				// console.log('close');
			},
			// 跳转消息
			xiaoxiym() {
				uni.switchTab({
					url: '/pages/xiaoxi/xiaoxi'
				})
			},
			//跳转集市
			tzjs() {
				uni.switchTab({
					url: '/pages/jishi/jishi'
				})
			},
			fffb(){
				console.log(111)
				if (this.fenleiid == 0) {
					httpRequest.toast("请选择分类")
					return
				}
				if(!this.items.flag){
					httpRequest.toast('该分类为免费分类，请点击发布直接发布!')
					return
				}
				let msg = {
					xqid: "",
					id: this.fenleiid,
					fenleitext:this.fenleitext,
					price:this.items.spendprice
				}
				uni.navigateTo({
					url: '/pages/jishi/xinxifabu?msg=' + encodeURIComponent(JSON.stringify(msg))
				})
				this.fbshow = false
			},
			//跳转发布页面
			tzdabu() {
				if (this.fenleiid == 0) {
					httpRequest.toast("请选择分类")
					return
				}
				if(this.items.flag){
					httpRequest.toast('该分类为付费分类，请选择付费发布!')
					return
				}
				let msg = {
					xqid: "",
					id: this.fenleiid,
					fenleitext:this.fenleitext
				}
				uni.navigateTo({
					url: '/pages/jishi/xinxifabu?msg=' + encodeURIComponent(JSON.stringify(msg))
				})
				this.fbshow = false
			},
			//跳转其他社区
			tzqtadiq() {
				// if (this.fenleiid == 0) {
				// 	httpRequest.toast("请选择分类")
				// 	return
				// }
				let msg = {
					id: this.fenleiid,
					fenleitext:this.fenleitext
				}
				uni.navigateTo({
					url: '/pages/jishi/qitadiqu' 
					// + encodeURIComponent(JSON.stringify(msg))
				})
				this.fbshow = false
			}
		}

	}
</script>
<style lang="scss" scoped>
	.shangbianju{
		padding-top: 60rpx;
	}
	//发布弹出层
	.yichuyinc {
		overflow: auto;
		height: 330rpx;
	}

	/deep/.u-safe-area-inset-bottom {
		padding-bottom: 0 !important;
	}

	.fufeibtns {
		width: 100%;
		height: 77rpx;
		display: flex;
		margin: 30rpx auto 0;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #FFFFFF;
		align-items: center;
		justify-content: center;
		background: #2ACC9C;
		border-radius: 20rpx;
	}
	.fufei{
		position: absolute;
		top: 0;
		right: 0;
		padding: 6rpx;
		font-size: 20rpx;
		border-radius: 10rpx;
		background-color: #2ACC9C;
		color: #FFFFFF;
	}
	.fufeibtn {
		width: 100%;
		height: 77rpx;
		display: flex;
		margin: 30rpx auto 0;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #2ACEB0;
		align-items: center;
		justify-content: center;
		background: rgba(42, 204, 156, .2);
		border-radius: 20rpx;
	}

	.dafabbtn {
		margin: auto;
		width: 100%;
		height: 77rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #2ACC9C;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #2ACC9C;
	}

	.bgc {
		margin-bottom: 26rpx;
		background-image: url('@/static/image/system/bgc.png');
		background-size: 100% 100%;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		padding: 24rpx 43rpx;
		color: #2ACC9C;
	}

	/deep/.u-popup__content {
		width: 80%;
	}

	.huanhang {
		flex-wrap: wrap;
		margin-top: 40rpx;
		position: relative;
	}

	.fbbtn {
		margin-bottom: 26rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
		padding: 24rpx 43rpx;
		border: 1rpx solid #999999;
		border-radius: 20rpx;
	}

	.tanchuc {
		padding: 30rpx 80rpx 60rpx;
	}
</style>
<style lang="scss" scoped>
	.xiaoxi {
		width: 40rpx;
		margin: 30rpx auto 0;
		height: 38rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.gudingbox {
		padding: 10rpx 30rpx;
		border-radius: 20rpx;
		position: fixed;
		bottom: 250rpx;
		right: 30rpx;
		background: rgba(42, 204, 156, .8);
	}

	.fabutupian {
		width: 43rpx;
		margin: auto;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.baisetext {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #FFFFFF;
	}

	.jishitupian {
		margin: 30rpx auto 0;
		width: 43rpx;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
